import React, { Component } from 'react'
import { connect } from 'react-redux';
import Header from '../common/Header';
import { collent_action } from '../../store/store';
import { Toast } from 'antd-mobile';
import Shop from './Shop/Shop';
import NumShop from './NumShop/NumShop';
class Detail extends Component {
    constructor(){
        super();
        this.state={
            flag:false,
            catflag:false
        }
    }
    componentDidMount(){
        var obj= this.props.lis.find(itm=>{
            return itm.id===this.props.list.id
        })
        if(obj){
            this.setState({
                flag:true
            })
            
        }else{
            this.setState({
                flag:false
            })
        }
    }
    collent=(item)=>{
       this.props.coll(item);
       var obj= this.props.lis.find(itm=>{
            return itm.id===item.id
        })
        if(obj){
            this.setState({
                flag:false
            })
            Toast.fail('取消收藏 !!!', 1);
        }else{
            this.setState({
                flag:true
            })
            Toast.success('收藏成功 !!!', 1);
        }
    }
    catClick=()=>{
        this.setState({
            catflag:!this.state.catflag
        })
    }
    topClick=()=>{
        this.setState({
            catflag:false
        })
    }
    render() {
        return (
            <div className='detail'>
                
                <div className="bigHead" style={{backgroundImage:`url(${this.props.list.pic})`}}>
                    {/* 头部组件 */}
                    <Header title='' left={<span onClick={() => { this.props.history.push('/home') }}>&lt;</span>} right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                    {/* 商店名字 */}
                    <div className="box">
                        <div className="img">
                            <div className="imgs">
                                <img src={this.props.list.pic} alt=""/>
                            </div>
                            <p>{this.props.list.name}</p>
                            <span className={`iconfont icon-shoucang ${this.state.flag?'active':''}`} onClick={()=>{this.collent(this.props.list)}}></span>
                        </div>
                     
                            <div className="shou">
                                <div className="div">
                                    <span className='iconfont icon-sousuo'>搜索</span>
                                </div>
                                <span>点赞</span>
                                <span>评价4.5</span>
                                <span>商家</span>
                            </div>
                    </div>
                </div>
                {/* 商店的商品组件 */}
                <Shop list={this.props.list.content}></Shop>
                {/* 购物车图标 */}
                <div className="shopcat">
                    <div className="div">
                    <div className={`iconfont icon-gouwuche1 ${this.props.catList.length>0?'active':''} `} onClick={()=>{this.catClick()}}></div><span className='span'>{this.props.catList.reduce((total,item)=>{
                                return total+item.count;
                                },0)}</span>
                    </div>
                    <span className='num'>￥{this.props.catList.reduce((total,item)=>{
                                return total+item.count*item.money;
                                },0)}元</span>
                            <button onClick={()=>{this.props.history.push('/order')}}>去结算</button>
                </div>
                {/* 购物车的加减 */}
                {this.state.catflag?
                <NumShop topClick={this.topClick}></NumShop>:""}
            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            list: state.detailshop,
            lis:state.collentShop,
            catList:state.catList
        }
    },
    (dispatch) => {
        return {
            coll:(item)=>{
                dispatch(collent_action(item))
            }
        }
    }
)(Detail)

